<template>
    <div class="container" >
        <div class="avatar">
            <img :src='userinfo.avatar_url' alt="">
            <span>{{userinfo.loginname}}</span>
        </div>
        <div class="topic-con">
            <div class="title">最近文章:</div>
            <div v-for="topic in topics">
                <router-link :to="{name:'ArticleRoute',params:{id:topic.id}}" @click.native="refreshArticle"><span :title="topic.title">{{topic.title | str}}</span></router-link>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: "side-sec",
    props:['authorName'],
    data(){
        return {
          userinfo:{
            avatar_url:'',
            loginname:'temp',
          },
          replies:[],
          topics:[],
          loading:true
        }
    },
    filters:{
      str(v){
        v = String(v);
        return v.length > 15 ? v.substring(0,15) + "..." : v;
      }
    },
    methods:{
      refreshArticle(){
        this.$emit("refreshArticle");
      }
    },
    watch:{
      userinfo(val){
        if(val){
          this.loading = false;
        }
      },
      authorName(val){
        const self = this;
        if(this.authorName){
          this.$http({
            url: `https://cnodejs.org/api/v1/user/${val}`,
            method:'get'

          }).then(res => {
            var data = res.data.data
            self.userinfo = data;
            self.replies = data.recent_replies.slice(0,3);
            self.topics = data.recent_topics.slice(0,10);
            console.log(self.replies)
            self.loading = false;

          }).catch(res => {
            console.log("Side request error !");
          })
        }
      }
    }
  }
</script>

<style scoped lang="less">
    a{
        text-decoration: none;
        color: #5b5982;
    }
    a:hover{
        color: #8c89be;
    }
.container{
    display: flex;
    flex-direction: column;
    width:18%;
    height:30rem;
    padding:2rem;
    background-color: #f6f7ff;
    border:1px dashed lightgrey;
}
    .avatar{
        display: flex;
        justify-content: flex-start;
        img{
            width:4rem;
            height:4rem;
        }
        span{
            padding:0px 1rem;
            height:4rem;
            line-height: 4rem;
        }
    }
    .reply-con,.topic-con{
        margin-top:1rem;
        border:1px solid lightgrey;
        background-color: #f4f4f4;
        width:100%;
        height:15rem;
        .title{
            color: #323c40;
        }
    }
</style>
